<template>
  <el-dialog :visible.sync="visibleSync" title="添加vps" width="400px" @close="handleClose" append-to-body
    class="dark-dialog">
    <el-form :model="form" label-width="80px" class="dark-form">
      <el-form-item label="ip">
        <el-input :disabled="userRole !== 'admin'" v-model="form.ipAddress" autocomplete="off" />
      </el-form-item>
      <el-form-item label="城市名">
        <el-input :disabled="userRole !== 'admin'" v-model="form.cityName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="国家名">
        <el-input :disabled="userRole !== 'admin'" v-model="form.countryName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="国旗">
        <el-input :disabled="userRole !== 'admin'" v-model="form.flagPath" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input :disabled="userRole !== 'admin'" v-model="form.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input :disabled="userRole !== 'admin'" v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="操作系统">
        <el-input :disabled="userRole !== 'admin'" v-model="form.operSystem" autocomplete="off" />
      </el-form-item>
      <el-form-item label="服务名称">
        <el-input :disabled="userRole !== 'admin'" v-model="form.serviceName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="端口号">
        <el-input :disabled="userRole !== 'admin'" v-model="form.portNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="平台">
        <el-input :disabled="userRole !== 'admin'" v-model="form.platform" autocomplete="off" />
      </el-form-item>
      <el-form-item label="节点类型">
        <el-input :disabled="userRole !== 'admin'" v-model="form.nodeType" autocomplete="off" />
      </el-form-item>
      <el-form-item label="节点名称">
        <el-input :disabled="userRole !== 'admin'" v-model="form.nodeName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内存大小">
        <el-input :disabled="userRole !== 'admin'" v-model="form.memorySize" autocomplete="off" />
      </el-form-item>
      <el-form-item label="添加备注">
        <el-input :disabled="userRole !== 'admin'" type="textarea" row="3" v-model="form.remark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleOk">确 定</el-button>
    </span>
    <!-- ...existing code... -->
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "PoentsIndex",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    city: {
      type: Object,
      default: null
    },
    mode: {
      type: String,
      default: "add"
    }
  },
  computed: {
    ...mapState(["userRole"])
  },
  data() {
    return {
      form: {
        cityName: "",
        countryName: "",
        operSystem: "",
        serviceName: "",
        portNum: "",
        platform: "",
        nodeType: "",
        nodeName: "",
        memorySize: "",
        flagPath: "",
        ipAddress: "",
        userName: "",
        password: "",
        remark: ""
      },
      visibleSync: this.visible,
    };
  },
  watch: {
    visible(val) {
      this.visibleSync = val;
      if (val) {
        // 只进行添加操作，打开时清空所有字段
        this.form.cityName = "";
        this.form.countryName = "";
        this.form.operSystem = "";
        this.form.serviceName = "";
        this.form.portNum = "";
        this.form.platform = "";
        this.form.nodeType = "";
        this.form.nodeName = "";
        this.form.memorySize = "";
      }
    },
    visibleSync(val) {
      if (!val) {
        this.$emit("update:visible", false);
      }
    }
  },
  methods: {
    handleOk() {
      this.visibleSync = false;
      // 只进行添加操作，直接传递 form 数据
      this.$emit("success", this.form);
    },
    handleClose() {
      this.visibleSync = false;
    }
  }
};
</script>

<style scoped>
.dark-dialog ::v-deep .el-dialog__header,
.dark-dialog ::v-deep .el-dialog__body,
.dark-dialog ::v-deep .el-dialog__footer {
  background: #f8fafc;
  color: #232526;
  border: 1.5px solid #b3c6e8;
  border-radius: 14px;
}
.dark-dialog ::v-deep .el-dialog {
  border: 1.5px solid #b3c6e8;
  border-radius: 14px;
  background: #f8fafc;
}
.dark-dialog ::v-deep .el-dialog__title {
  color: #409eff !important;
  font-weight: bold;
  letter-spacing: 1px;
}
.dark-form ::v-deep .el-form-item__label {
  color: #409eff !important;
}
.dark-form ::v-deep .el-input__inner {
  background: #fff;
  color: #232526;
  border: 1px solid #b3c6e8;
}
.dark-form ::v-deep .el-input__inner:focus {
  border-color: #409eff;
  background: #f3f6fa;
}
.dialog-footer .el-button {
  border-radius: 6px;
  font-size: 16px;
  height: 40px;
  background: #e9f0fb;
  border: none;
  color: #409eff;
}
.dialog-footer .el-button--primary {
  background: #409eff;
  color: #fff;
}
.dialog-footer .el-button:hover,
.dialog-footer .el-button--primary:hover {
  background: #b3c6e8;
  color: #fff;
}
</style>